<template>
  <div>
    <el-table :data="list" :loading="loading" class="mt20" style="width: 100%">
      <el-table-column label="姓名" prop="fingerprintName" width="160px"></el-table-column>
      <el-table-column label="添加者" prop="senderUsername" width="100px"></el-table-column>
      <el-table-column label="指纹号" prop="fingerprintNumber" width="160px"></el-table-column>
      <el-table-column label="有效期" prop="date" width="300px">
        <template #default="{ row }">
          <span v-if="row.startDate === 0">永久</span>
          <span v-else>{{ parseTime(row.startDate) }} ~ {{ parseTime(row.endDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="createTime" width="160px">
        <template #default="{ row }">{{ parseTime(row.createDate) }}</template>
      </el-table-column>
<!--      <el-table-column label="状态" prop="electricQuantityUpdateDate" width="100px">-->
<!--        <template #default="{ row }">-->
<!--          <span>{{ row.status }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="flex-row-center">
<!--            <el-button link type="primary">修改有效期</el-button>-->
            <el-button link type="primary" @click="handleRemove(row)">删除</el-button>
<!--            <el-button link type="primary" @click="handleRecord(row)">操作记录</el-button>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <SendPassword
      type="message"
      :visible="messageVisible"
      @cancel="() => messageVisible = false"
      @ok="handleSendMessageOk"
    />
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup name="KeyPane">
import { useRouter } from 'vue-router'
import SendPassword from '@/components/SendPassword'
import LockApi from "@/api/device/lock.js";

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const total = ref(0)
const list = ref([])
const sendKeyVisible = ref(false)
const messageVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
})
const { queryParams } = toRefs(data)

const props = defineProps({
  lockId: String
})

const pageNum = ref(1)
const pageSize = ref(10)

/* 删除密码 */
function handleRemove() {
  proxy.$modal.confirm("确定删除密码？").then(() => {
    console.log('删除');
  }).catch(() => {
    console.log('cancel');
  })
}

/* 使用记录 */
function handleRecord() {
  router.push({ path: '/deviceManagement/smartLock/record' })
}

/* 短信通知 */
function handleSendMsg() {
  messageVisible.value = true
}

function handleSendMessageOk() {
  messageVisible.value = false
}

function getList() {
  if (!props.lockId) {
    return
  }
  
  loading.value = true
  const params = {
    ...queryParams.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  LockApi.getFingerprintList(props.lockId, params).then(res => {
    if (res.code === 200) {
      list.value = res.rows
      total.value = res.total
    }
    loading.value = false
  })
}

function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

function handleCurrentChange(val) {
  pageNum.value = val
  getList()
}

function handleSearch(params) {
  pageNum.value = 1
  queryParams.value = {
    ...queryParams.value,
    ...params
  }
  getList()
}

getList()
</script>
